<template>
    <div class="overflow-hidden rounded-lg">
        <button
            class="bg-white overflow-hidden text-black w-full px-3 py-4 flex items-center justify-between text-left relative "
            @click="toggleCollapse" :style="_buttonStyle">
            <div class="flex-1 w-full">
                <div class="flex items-center justify-between">
                    <slot name="title">
                        <div class="font-bold text-[15px]">
                            {{ title }}
                        </div>
                    </slot>
                    <div class="flex items-center">
                        <span v-if="hasDefaultSlot && selectShow"
                            class="bg-gray-200 w-4 h-4 rounded-full mr-2 bg-green-500 flex items-center justify-center">
                            <Icons name="icon-selected" class="text-[10px]! text-white!" />
                        </span>
                        <slot name="rightIcon"></slot>
                        <slot name="rightArrow">
                            <span class="transition-transform duration-300"
                                :class="!hasDefaultSlot ? 'rotate-0' : (isCollapsed ? 'rotate-0' : 'rotate-90')">
                                <Icons name="icon-allow-right" class="text-[14px]! font-bold! w-[12px] h-[12px]" />
                            </span>
                        </slot>
                    </div>
                </div>
                <div class="flex items-center justify-between" v-if="content">
                    <div class="mt-2 font-[200] text-[#666] text-[12px] w-[80%] flex-1">
                        <slot name="content">
                            <template v-if="!(content === null)">
                                {{
                                    content
                                }}
                            </template>
                        </slot>
                    </div>
                    <div class="mr-2 flex items-center">
                        <slot name="rightText">
                        </slot>
                    </div>
                </div>
            </div>
        </button>
        <div class="overflow-hidden transition-all duration-500 ease-in-out" :style="_bodyStyle">
            <div class="pb-2 px-1" v-if="hasDefaultSlot">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, useSlots, type StyleValue } from 'vue';
import { Icons } from '../icons';
import parse from 'style-to-object';
// 定义组件props
const props = withDefaults(defineProps<{
    title: string;        // 折叠面板标题
    content?: string | null;        // 折叠面板描述
    defaultOpen?: boolean; // 默认是否展开
    openMore?: boolean; // 默认是否展开
    bodyStyle?: StyleValue; // 折叠面板内容样式
    buttonStyle?: StyleValue; // 折叠面板内容样式
    selectShow?: boolean
}>(), {
    title: '折叠面板',
    content: '折叠面板',
    defaultOpen: false,
    openMore: false,
    selectShow: true,
})

const emit = defineEmits(['handleClick'])

// 获取插槽
const slots = useSlots()

// 判断默认插槽是否有值
const hasDefaultSlot = ref(!!slots.default)

// 判断默认插槽是否有值
const hasmore = ref(false)

// 控制折叠状态
const isCollapsed = ref(!props.defaultOpen)

// 折叠内容样式
const _bodyStyle = computed(() => {
    const baseStyle = (isCollapsed.value || !hasDefaultSlot.value)
        ? { 'max-height': '0px' }
        : {}

    // 处理 props.bodyStyle 可能是字符串的情况
    const customStyle = typeof props.bodyStyle === 'string'
        ? parse(props.bodyStyle)
        : props.bodyStyle || {}

    return {
        ...baseStyle,
        ...customStyle,
    }
})
const _buttonStyle = computed(() => {

    // 处理 props.bodyStyle 可能是字符串的情况
    const customStyle = typeof props.buttonStyle === 'string'
        ? parse(props.buttonStyle)
        : props.buttonStyle || {}

    return {
        'rounded-lg': true,
        ...customStyle,
    }
})

// 切换折叠状态
const toggleCollapse = () => {
    if (hasDefaultSlot.value) {
        if (!props.openMore) {
            isCollapsed.value = !isCollapsed.value
        }
    } else {
        emit('handleClick')
    }
}
</script>